<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏遮罩</title>
    <style>
        .mark{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            /*四个方向全部设置实现撑满全屏的效果*/
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

        }
    </style>
</head>
<body>
<div class="mark"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut, beatae commodi consectetur distinctio
        dolores ducimus inventore ipsa laudantium natus obcaecati porro quos suscipit! Maiores molestiae officia quis
        saepe totam?
    </div>
    <div>Accusamus aliquam animi aperiam cum debitis dolore dolores dolorum ex hic ipsam libero, magnam minus nobis
        obcaecati odio officiis omnis praesentium repellendus rerum saepe sed sequi tempora unde, voluptas voluptatem!
    </div>
    <div>Asperiores enim harum ipsam nisi voluptatibus! Debitis dolorem id ipsum magnam nam ut vero! Eveniet ipsam
        labore laborum molestiae nihil quo rem similique voluptatem! Alias eos numquam optio ratione vitae?
    </div>
    <div>Aut facere modi nisi quos recusandae? Ab ad autem cumque deleniti, dicta distinctio eius eos et illo iste iure
        maxime molestiae nemo nulla possimus quia quo rem similique temporibus voluptate!
    </div>
    <div>Debitis dicta dolore earum expedita incidunt ipsa, itaque iure iusto, magni nesciunt nostrum perferendis
        placeat quas reiciendis sed soluta suscipit? Ad aliquam aut eum facere ipsam maxime obcaecati quam qui.
    </div>
    <div>Aliquam architecto corporis dolore ea ex explicabo facere facilis fuga, incidunt minima necessitatibus officiis
        sunt, voluptatum! Aliquam cum, earum libero magni, nesciunt nostrum perspiciatis possimus praesentium quos sed
        totam voluptates.
    </div>
    <div>Architecto, asperiores atque distinctio dolor dolores, eveniet ex fugiat magni nobis nostrum odit officia
        placeat qui repellat similique tempore unde! Alias aliquam architecto, atque beatae consequatur cum nemo
        praesentium vitae?
    </div>
    <div>Animi architecto atque blanditiis culpa eius labore obcaecati quasi qui, quo sit. Cupiditate eos eum, iusto
        nesciunt perspiciatis quaerat quasi quos temporibus. Blanditiis commodi culpa illo maiores, quaerat suscipit
        totam.
    </div>
    <div>A ab asperiores cumque doloremque ea, explicabo omnis, pariatur provident, reiciendis unde vitae voluptate!
        Accusantium atque cupiditate doloribus harum non obcaecati, officiis optio, quam quibusdam quos, repellat sed
        similique ullam!
    </div>
    <div>Aliquam assumenda atque aut dolor dolorem est, fuga, inventore molestiae pariatur saepe, sint sit veniam.
        Adipisci alias commodi facere magnam repudiandae sint vero, voluptatem. Ea, possimus, ratione? Amet, officia
        voluptatibus?
    </div>
    <div>Aperiam consequatur in ipsum minima perspiciatis quas quo quod sint velit, voluptatibus? Ad assumenda beatae
        blanditiis iure libero obcaecati odio quaerat quisquam ut, voluptatum! Dolore id iusto laboriosam natus nostrum!
    </div>
    <div>Animi aperiam atque deleniti expedita illo laudantium minima perspiciatis quos, ullam unde. Accusantium
        delectus, dicta error excepturi minima mollitia nesciunt, odit possimus ratione sunt voluptatem voluptatum!
        Accusamus, in tempore. Autem.
    </div>
    <div>Dicta, nulla odio recusandae repellat sed voluptatum. Consequuntur officiis repellendus rerum. Ad aspernatur
        aut consequatur dignissimos ducimus facilis libero odit quaerat? Alias debitis esse odit quod reiciendis sit
        voluptate voluptatum!
    </div>
    <div>Amet assumenda blanditiis cum cumque cupiditate distinctio ducimus earum, esse est exercitationem harum id ipsa
        magni minus natus non placeat quaerat quam quibusdam quisquam repellendus sequi sint veritatis. A,
        reprehenderit!
    </div>
    <div>Animi assumenda aut autem beatae cumque delectus deleniti dicta, dignissimos doloremque ducimus ea eius, ipsam
        iusto omnis porro, quod sapiente. Adipisci alias aspernatur consequatur corporis cum dolorum esse, fugiat
        suscipit.
    </div>
    <div>Dolor eligendi minus tempore! Aspernatur illum incidunt molestias odit omnis! Ad commodi deserunt dolore eius
        est, hic in iure molestias vel? Ab, dolore, fugiat. Autem ea nulla praesentium voluptatem! Ipsum!
    </div>
    <div>Alias aperiam consequuntur dicta facere, id ipsa laboriosam perspiciatis quibusdam quo temporibus voluptatem
        voluptatibus? Accusamus amet, cupiditate debitis exercitationem explicabo nostrum quaerat, quibusdam quisquam
        quod quos repellat repellendus sit veritatis!
    </div>
    <div>Dolore, magnam repudiandae. Accusantium asperiores assumenda deserunt dicta distinctio doloribus ea eligendi
        eos est eum expedita, explicabo in nisi nostrum officiis perferendis quas sapiente, sed suscipit tempore
        temporibus vel veniam!
    </div>
    <div>Aperiam aut cum cumque dolore dolorem, earum eius enim est et facilis fugit ipsum labore maxime minus molestiae
        nemo provident quidem quis rem reprehenderit saepe soluta temporibus vel velit vitae?
    </div>
    <div>Aliquid assumenda fuga fugiat ipsum maiores modi non. Dignissimos expedita labore laboriosam magnam, maxime
        molestias, nemo nesciunt obcaecati quia sit suscipit ullam veritatis, vitae! Blanditiis ducimus ipsam quisquam
        tempora ut!
    </div>
    <div>Animi aspernatur, assumenda atque eaque, est fugiat fugit harum laudantium minima modi natus odit porro
        possimus rem sit velit veniam, voluptas voluptatum? Dicta quasi qui voluptas! Enim saepe sapiente tempore.
    </div>
    <div>Alias aspernatur dicta distinctio dolorem eligendi fuga fugit id illum inventore magni molestias nisi odio
        perspiciatis quasi quisquam quo repellat, veritatis voluptatibus. At consequuntur deleniti laudantium molestias
        officiis quas quos?
    </div>
    <div>Aliquam, at deserunt dolore dolorem ducimus eius error impedit ipsa itaque minus. Assumenda ea eius
        exercitationem fugiat in inventore iure nemo nisi perspiciatis possimus praesentium provident, quis tenetur
        vitae voluptatum.
    </div>
    <div>Accusamus, amet assumenda beatae cumque dolore dolorum, earum error eum eveniet explicabo fuga id illum itaque
        labore minus natus, nisi perspiciatis possimus quas qui sapiente sint suscipit vel vero voluptas.
    </div>
    <div>Beatae consectetur consequuntur dignissimos dolor dolore dolorum est fugit, id impedit, in itaque laudantium
        neque officia perferendis quam quidem repudiandae velit! Dolore eos itaque nihil non placeat. Et, nobis, quis.
    </div>
    <div>Ab aut consequatur est expedita inventore molestias, necessitatibus nisi qui, sequi similique temporibus
        veritatis voluptatibus? Assumenda consequuntur eius exercitationem fuga maiores recusandae repudiandae? Adipisci
        beatae dignissimos, iusto nobis similique vel.
    </div>
    <div>Adipisci animi aperiam atque cumque delectus deleniti dolor dolorem ducimus error est et eum fuga illum ipsa
        ipsam laborum maxime modi nihil porro, provident, quia quo suscipit. Enim, minus, veritatis.
    </div>
    <div>Ad animi doloremque, enim excepturi libero officiis pariatur, quo ratione repudiandae sequi sit tempora
        voluptatum? Cum debitis fuga laudantium magnam perspiciatis praesentium, quas! Dolore dolores expedita
        laboriosam placeat sapiente sint.
    </div>
    <div>Consectetur consequuntur, dignissimos, dolorem eius est ex illum ipsa iure nemo nostrum placeat porro
        praesentium quas quia ratione, repellendus ut? Alias asperiores blanditiis eaque impedit necessitatibus officia
        porro sapiente tenetur.
    </div>
    <div>Aperiam, consectetur impedit ipsa quam quasi quidem. Accusamus earum eius, eos expedita, in labore magni
        maiores natus nisi quidem, saepe sed sint voluptatum. Alias atque eos similique? Incidunt officia, ullam?
    </div>
    <div>A, aperiam atque cupiditate deleniti dicta doloremque dolores excepturi inventore, maxime quasi sint ullam
        unde, veniam? Consectetur consequuntur cum delectus dicta earum ipsum optio perspiciatis quod. Cum dolores nulla
        pariatur.
    </div>
    <div>At, consequuntur, corporis debitis deserunt est eveniet incidunt maiores minus molestiae natus possimus quas
        qui quis quod, voluptas. Alias et harum incidunt ipsa, minus non officiis reprehenderit voluptas. Aperiam, qui.
    </div>
    <div>Dignissimos ducimus ea eligendi hic magni nisi porro tempora voluptas? Accusantium adipisci architecto aut
        cupiditate dolores ducimus ea eveniet facilis illo itaque labore laudantium modi nostrum, quidem, quisquam sunt
        tempora.
    </div>
    <div>Accusantium amet blanditiis consequuntur cum eos ex fuga illo impedit ipsum magnam modi, nam nesciunt, nisi
        officiis perferendis perspiciatis quam quis recusandae vitae voluptatibus. Amet dolore laborum quidem suscipit
        temporibus.
    </div>
    <div>Aliquam atque deserunt dolorem, ea est maiores nisi possimus quisquam. Aliquam atque blanditiis commodi, eaque
        explicabo fugiat, libero nemo omnis quae quisquam repellendus sit sunt. Doloribus enim laborum maxime velit.
    </div>
    <div>Aliquam architecto cupiditate doloribus exercitationem explicabo illum ipsum libero odio, odit porro provident
        quia reiciendis rem, reprehenderit rerum soluta velit. Aperiam atque dignissimos eius facilis fugiat iste
        maiores sapiente sit!
    </div>
    <div>Eum illo ipsam mollitia sed voluptatum! Aut debitis distinctio exercitationem fuga molestiae possimus quos
        tempora tempore, veritatis vitae. Amet cupiditate eligendi excepturi expedita necessitatibus omnis, quaerat quia
        reprehenderit tenetur vero.
    </div>
    <div>Aliquam cum distinctio dolor dolores esse in pariatur quos recusandae. Ex in incidunt magni nihil quas quo
        saepe! Aperiam consequatur corporis dignissimos excepturi facilis incidunt ipsum, quasi reprehenderit ullam
        vitae.
    </div>
    <div>Alias commodi consectetur consequatur ducimus impedit itaque iusto modi nam nobis voluptatibus? Accusantium
        cumque doloribus ea earum enim esse facere minima odit praesentium unde. Deleniti inventore nihil pariatur
        repellendus sapiente!
    </div>
    <div>Cupiditate, dicta dolorem impedit itaque natus quis quisquam vitae. A, animi aperiam dicta dolor error
        exercitationem facere fugit iste iure magnam provident, quae qui quidem quis ut vel voluptas voluptates.
    </div>
    <div>Ad adipisci consequuntur dolores enim error eveniet, excepturi expedita harum id illo labore minima molestias
        necessitatibus nisi obcaecati odit optio placeat, praesentium qui quia quos repudiandae sed tempora ullam vero!
    </div>
    <div>Architecto doloribus error hic maxime molestiae nemo odio repellendus sed sit unde. Architecto asperiores
        assumenda aut excepturi exercitationem fuga impedit in inventore labore libero nostrum quam quos sequi tempora,
        tenetur.
    </div>
    <div>Assumenda atque cupiditate dicta error facilis inventore iure iusto laborum, molestias nulla officia quaerat
        quasi, qui quia tempora tenetur unde. Blanditiis facilis id omnis. Excepturi, facere quos. Aut, tenetur,
        veritatis.
    </div>
    <div>Aut deleniti, dolor fugit harum, inventore, minima obcaecati quae quibusdam quis quod repellat sunt totam ut
        veritatis voluptas. Aspernatur assumenda culpa eius ipsam natus necessitatibus nisi porro repellat tenetur
        voluptatibus.
    </div>
    <div>Ab harum recusandae sapiente soluta? Aliquid autem, debitis id laborum nostrum saepe. Dolores fuga, minus
        placeat quaerat qui repellat temporibus velit vitae. Assumenda expedita itaque mollitia quam quibusdam sed
        similique!
    </div>
    <div>Dolores earum fuga hic nesciunt ratione? A atque autem debitis deserunt dignissimos esse fugit ipsum magni
        natus nisi nulla obcaecati praesentium quas, quidem, quod rem sunt totam vitae? Adipisci, sapiente.
    </div>
    <div>Amet distinctio dolorum eum ex fuga fugiat illo nam, nostrum officiis perferendis quisquam, quo quod rem rerum
        saepe? Ad asperiores atque facilis minus, officiis reprehenderit sequi unde ut vel veniam?
    </div>
    <div>Aliquam autem cumque cupiditate dicta doloremque exercitationem, fuga fugit ipsa numquam rem reprehenderit
        saepe sint tenetur! A consequatur cumque deleniti eaque eligendi facilis fuga illo ipsa quo, vero voluptas
        voluptatibus!
    </div>
    <div>Ad delectus dolore dolorum eaque earum eligendi eveniet exercitationem explicabo facilis fugiat id, impedit
        ipsam magnam minus necessitatibus pariatur quam qui rem repellat sunt tenetur veniam veritatis. Ipsam,
        recusandae sapiente!
    </div>
    <div>Ab animi aperiam consequatur ea eos, excepturi fuga libero minima molestiae molestias neque nobis non obcaecati
        odit omnis perferendis perspiciatis quidem quos saepe sed unde veritatis voluptatum! Aspernatur maiores, sunt.
    </div></div>

</body>
</html>